<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>代办事项</title>
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
</head>
<body>
<div class="container" id="app">
    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <h1>JAVA练习的TODOLIST</h1>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <form class="form form-inline">
                <div class="form-group form-group-sm">
                    <input type="text" class="form-control" v-model="todoclassname" placeholder="请输入分类名称" />
                    <button type="button" class="btn btn-primary"  v-on:click="addtodoclass()">添加同级</button>
                    <button type="button" class="btn btn-info" v-on:click="addtodoclass('1')">添加下级</button>
                </div>
            </form>
            <ul class="nav nav-pills nav-stacked">
                <li v-for="(item,index) in todoclasses" v-on:click="changetodoclass(item,index)">
                <a href="#">{{item.todoclass.name}}</a></li>
            </ul>
        </div>
        <div class="col-md-8">
            <form class="form form-inline">
                <div class="form-group">
                    <input type="text" class="form-control" v-model="todotitle" placeholder="请输入代办事项名称" />
                    <button type="button" class="btn btn-primary" v-on:click="addtodo()">添加</button>
                </div>
            </form>
            <div class="list-group">
                <a href="#" class="list-group-item" v-for="(item,index) in currenttodoclass.todos">
                    <span class="badge label-success" v-if="item.state==1">已完成</span>
                    <span class="badge label-info" v-if="item.state==0" v-on:click="updatestate(item)">未完成</span>
                    <span class="badge label-info" v-on:click="deletetodo(item)">删除</span>
                    {{index+1}}.{{item.title}}【{{item.create_dt}}】
                </a>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    var vue = new Vue({
        el:'#app',
        data:{
            index:0,
            todoclassname:'',
            todotitle:'',
            currenttodoclass:{
                todoclass:{
                    id:1,
                    name:'学习'
                },
                todos:[]
            },
            todoclasses:[]
        },
        methods:{
            changetodoclass:function(item,index) {
                this.index=index;
                this.currenttodoclass=item;
            },
            addtodoclass:function(level){
                var param='';
                param="todoclassname="+this.todoclassname;
                axios.post('/todo/savetodoclass.wst',param).then(function (result) {
                    if(result.status==200){
                        console.log(result);
                        alert('保存成功')
                        vue.init();
                    }
                }).catch(function (err) {
                    console.error(err);
                    alert('网络异常')
                })
            },
            addtodo:function() {
                var param='';
                param='todoclassid='+this.currenttodoclass.todoclass.id+'&title='+this.todotitle;
                axios.post('/todo/savetodo.wst',param).then(function (result) {
                    if(result.status==200){
                        console.log(result);
                        alert('保存成功');
                        vue.init();
                    }
                })
            },
            updatestate:function(item) {
                if(confirm("确定之前在检查一下呗")){
                    var param='';
                    param="id="+item.id;
                    axios.post('/todo/updatetodo.wst',param).then(function (result) {
                        if(result.status==200){
                            console.log(result);
                            alert('修改成功');
                            vue.init();
                        }
                    })
                }
            },
            deletetodo:function (item) {
                if(confirm("确定要删除？")){
                    var param='';
                    param="id="+item.id;
                    axios.post('/todo/deletetodo.wst',param).then(function (result) {
                        if(result.status==200){
                            console.log(result);
                            alert('删除成功');
                            vue.init();
                        }
                    })
                }
            },
            init:function () {
                axios.get('/todo/listtodoclasses.wst').then(function (result) {
                    console.log(result);
                    while(vue.todoclasses.length>0){
                        vue.todoclasses.pop();
                    }
                    for(var i=0;i<result.data.todoclasses.length;i++){
                        vue.todoclasses.push(result.data.todoclasses[i]);
                    }

                    vue.currenttodoclass=vue.todoclasses[vue.index];
                    vue.todoclassname='';
                    vue.todotitle='';
                }).catch(function (err) {
                    console.error(err);
                    alert('网络异常');
                })
            }
        },
        mounted:function () {
            console.log('inited');
            this.init();
        }
    });
</script>